<template>
  <div>
    <p>学生管理</p>
    <el-form-item class="search-form">
      <el-input type="text" v-model="searchQuery" placeholder="输入关键词进行搜索" />
      <el-button @click="search">搜索</el-button>
    </el-form-item>
    <div class="inputDiv">
      <el-form-item label="姓名">
        <el-input v-model="addForm.name" />
      </el-form-item>
      <el-form-item label="学号">
        <el-input v-model="addForm.studentId" />
      </el-form-item>
      <el-button class="import-el-button" @click="addPerson()">手动导入</el-button>
    </div>
    <div class="import_div">
      <p style="display: inline-block;">批量导入&nbsp;</p><input type="file" accept=".xlsx" @change="handleFileUpload">
    </div>
    <el-button class="import-el-button" @click="downLoadStu()">下载名单</el-button>

    <table>
      <thead>
      <tr>
        <th>学生ID</th>
        <th>姓名</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="person in people" :key="person.id">
        <td>{{ person.studentId }}</td>
        <td>{{ person.name }}</td>
        <td>




          <el-button @click="deletePerson(person)">删除</el-button>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { ref, toRefs, reactive, computed } from 'vue';
import { ElNotification, ElDialog, ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';
import XLSX from 'xlsx';
import FileSaver from 'file-saver';

const people = ref([
  { id: 1, studentId: '001', name: '张三' },
  { id: 2, studentId: '002', name: '李四' },
  { id: 3, studentId: '003', name: '王五' },
]);

const form = ref({
  studentId: '',
  name: '',
  editIndex: 0
});
const addForm = ref({
  name: '',
  studentId: ''
});
const dialogFormVisible = ref(false);
const addPerson = () => {
  const obj = {
    name: addForm.value.name,
    studentId: addForm.value.studentId
  };
  people.value.push(obj)
  addForm.value = {}
};
const editPerson = (person) => {
  // 初始化表单数据
  // form.value.studentId= person.studentId;
  form.value.name = person.name;
  form.value.studentId = person.studentId;
  form.value.editIndex = person.id;
  dialogFormVisible.value = true;
};

const deletePerson = (person) => {
  const index = people.value.findIndex(p => p.id === person.id);
  if (index !== -1) {
    people.value.splice(index, 1);
    ElNotification({
      title: '成功',
      message: '删除成功',
      type: 'success'
    });
  }
};
const searchQuery = ref('');

const filteredPeople = computed(() => {
  if (searchQuery.value === '') {
    return people;
  } else {
    const regex = new RegExp(searchQuery.value, 'i');
    return people.filter(person => {
      return regex.test(person.studentId) || regex.test(person.name);
    });
  }
});

const search = () => {
  const keyword = searchQuery.value.trim();

  if (keyword === '') {
    filteredPeople.value = people;
  } else {
    const regex = new RegExp(keyword, 'i');
    filteredPeople.value = people.filter(person => {
      return regex.test(person.studentId) || regex.test(person.name);
    });
  }
};


// const handleSave = () => {
//     const index = people.value.findIndex(p => p.studentId === form.value.studentId);
//     if (index !== -1) {
//         people.value[index].name = form.value.name;
//         ElNotification({
//             title: '成功',
//             message: '保存成功',
//             type: 'success'
//         });
//         dialogVisible.value = false;
//     }
// };

// const handleCloseDialog = (done) => {
//     form.value.studentId = '';
//     form.value.name = '';
//     done();
// };

// 将响应式数据转换为可解构的对象
const { value: reactivePeople } = toRefs(people);
const downLoadStu = () => {
  const worksheet = XLSX.utils.json_to_sheet(people.value);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
  XLSX.writeFile(workbook, 'students.xlsx');
}
const handleFileUpload=(event)=> {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.onload = (e) => {
    const data = new Uint8Array(e.target.result);
    const workbook = XLSX.read(data, { type: 'array' });
    const worksheet = workbook.Sheets[workbook.SheetNames[0]];
    const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

    // 将数据存入ref
    people.value = jsonData.map((row, index) => {
      if (index === 0) return null; // 跳过表头行
      const [id, studentId, name] = row;
      return { id, studentId, name };
    }).filter(Boolean);
  };

  reader.readAsArrayBuffer(file);
}

</script>

<style>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
.import_div{
  display: inline-block;
  margin-left: 28%;
}
</style>

<!-- 引入 Element Plus 组件库 -->
<script>
export default {
  components: {
    ElNotification,
    ElDialog,
    ElForm,
    ElFormItem,
    ElInput,
    ElButton,
  },
};
</script>